// 1. sass:math 模块 (提供数学运算函数，支持单位安全的计算。)
@use "sass:math";
.box {
  width: math.div(100px, 2);       // 50px（除法）
  height: math.add(10px, 20px);    // 30px（加法）
  margin: math.clamp(5px, 10px, 20px); // 限制在 5px~20px 之间
  padding: math.percentage(0.5);   // 50%（转换为百分比）
}

//2.sass:color 模块(处理颜色的创建、混合和调整。)
@use "sass:color";
.color-mix {
    $red: color.adjust(red, $red: 50); // 增加红色通道
    $blue: color.scale(blue, $lightness: 20%); // 按比例调整亮度
}
.theme {
  $primary: #3498db;
  $secondary: color.mix($primary, white, 30%); // 混合 30% 白色
  background: color.change($primary, $alpha: 0.5); // 调整透明度
}

// 3. sass:string 模块 (操作字符串，如拼接、分割、大小写转换)
@use "sass:string";
.text {
  $name: 'button';
  $class: string.append($name, '--primary'); // 'button--primary'
  $upper: string.to-upper-case('hello');     // 'HELLO'
}

// 4.sass:list 模块 处理列表（类似数组）
@use "sass:list";
$colors: ('red', 'green', 'blue');
.item {
  $first: list.nth($colors, 1); // 'red'
  $length: list.length($colors); // 3
}

// 5.sass:map 模块 操作映射（键值对）。
@use "sass:map";
$themes: (
  'light': ('bg': white, 'text': black),
  'dark': ('bg': black, 'text': white)
);
.dark-theme {
  $dark: map.get($themes, 'dark');
  background: map.get($dark, 'bg'); // black
}


// 6.sass:meta 模块  元编程功能，如动态调用混入或检查变量。
@use "sass:meta";
@mixin debug($value) {
  @debug 'Value is #{$value}';
}
@include meta.call(meta.get-function('debug'), 'hello'); // 输出调试信息


/*
    @use（推荐）：
        模块化导入，避免命名冲突
        每个模块只导入一次，后续导入不重复加载
        支持命名空间（如 math.div()）

    @import（已弃用）：
        全局导入，可能导致命名冲突。
        多次导入会重复加载。

*/